<template>
  <div class="app-container">
    <!--    <el-button type="primary" @click="handleDown()">批量下载</el-button>-->
    <el-form style="float: right" :inline="true" :model="formSearch" class="demo-form-inline">
      <el-form-item prop="areaSelect1">
        <area-select
          ref="areaselect"
          :area-num="formSearch.provCode"
          :area-name="formSearch.provName"
          :city-num="formSearch.cityCode"
          placeholder="请选择企业注册地"
          @getAreaSelect="getAreaSelect2"
        />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formSearch.entName" style="width: 350px" placeholder="输入企业名称" @keyup.enter.native="searchFetchData()" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchFetchData()">查询</el-button>
        <el-button type="primary" @click="searchReset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="企业名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.entName }}
        </template>
      </el-table-column>

      <el-table-column label="地区" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.provName }} {{ scope.row.cityName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsTel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="企业类型" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.entTypeName }}</span>
          <!--          <span :type="scope.row.roleCode | statusFilter">{{ scope.row.roleCode | statusFormat1 }}</span>-->
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="企业规模" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.entScaleName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="年度" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.creatorId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="110">
        <template slot-scope="scope">
          <el-button-group>
            <!--            <el-button type="warning" size="mini" @click="updateData(scope.row.userId)">查看详情</el-button>-->
            <el-button type="warning" size="mini" @click="toReport(scope.row.userId, scope.row.creatorId, scope.row.cityCode)">查看报告</el-button>
            <!--            <template v-if="roles === 'superAdmin'">-->
            <!--              <el-button type="warning" size="mini" @click="showPass(scope.$index)">重置密码</el-button>-->
            <!--              <el-button type="danger" size="mini" :disabled="scope.row.verifyFlag | verifyButton1" @click="showState(scope.$index)">{{ scope.row.state | statusButton }}</el-button>-->
            <!--            </template>-->
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      ref="paging"
      :current-page="currentPage"
      :total="total"
      :limit="limit"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { getReportList } from '@/api/ent'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import AreaSelect from '@/components/AreaSelect'
export default {
  name: 'ReportList',
  components: {
    Pagination,
    AreaSelect
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('请输入8-16位的密码'))
        } else {
          callback()
        }
      }
    }
    const validatePass2 = (rule, value, callback) => {
      const that = this
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== that.form1.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      formSearch: {
        entName: '',
        areaSelect1: ''
      },
      currentPage: 1,
      limit: 10,
      total: 0,
      stateState: false,
      countState: false,
      passState: false,
      addUrl: '/system/manageAdd',
      list: null,
      listLoading: true,
      index: '',
      username: '',
      form1: {
        id: '',
        password: '',
        aPassword: ''
      },
      form2: {
        id: '',
        state: ''
      },
      rules1: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        aPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      rules2: {
        state: [
          { required: true, message: '请选启用或禁用', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  role: '',
  created() {
    if (this.$route.query.pageN) { this.currentPage = this.$route.query.pageN - 0 }
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      var cityC = ''
      if (this.formSearch.areaSelect1.cityCode === '0') { cityC = '' } else { cityC = this.formSearch.areaSelect1.cityCode }
      getReportList({ provCode: this.formSearch.areaSelect1.areaCode, cityCode: cityC, entName: this.formSearch.entName, currentPage: this.currentPage }).then(response => {
        if (response.result === 1) {
          console.log(response)
          this.total = response.data.total
          this.list = response.data.list
          this.listLoading = false
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    searchFetchData() {
      this.fetchData()
    },
    searchReset() {
      this.formSearch.provCode = ''
      this.formSearch.provName = ''
      this.formSearch.cityCode = ''
      this.formSearch.cityName = ''
      this.formSearch.areaSelect1 = []
      this.$set(this.formSearch.areaSelect1, 'areaCode', this.formSearch.provCode)
      this.$set(this.formSearch.areaSelect1, 'areaName', this.formSearch.provName)
      this.$set(this.formSearch.areaSelect1, 'cityCode', this.formSearch.cityCode)
      this.$set(this.formSearch.areaSelect1, 'cityName', this.formSearch.cityName)
      this.$refs.areaselect.resetForm()
      this.formSearch.entName = ''
      this.fetchData()
    },
    getAreaSelect2(msg) { // msg就是传过来的数据了  这只是个形参  名字可以随意
      this.formSearch.areaSelect1 = msg// 然后将数据赋值给chindVal
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleSizeChange(val) {
      this.limit = val
      this.currentPage = 1
      this.fetchData()
    },
    updateData(userId) {
      console.log(this.currentPage)
      this.$router.push({ name: 'EntContent', query: { userId: userId, pageN: this.currentPage }})
    },
    toReport(userId, year, cityCode) {
      const routes = this.$router.resolve({ name: 'reportNewPdf', query: { userId: userId, year: year, cityCode: cityCode }})
      window.open(routes.href, '_blank')
      // this.$router.push({ name: 'reportNewPdf', query: { userId: userId, cityCode: cityCode }})
    },
    showState(index) {
      this.index = index
      this.form2.state = this.list[this.index].state
      this.stateState = true
    },
    onClose1() {
      this.form1.id = ''
      this.form1.password = ''
      this.form1.aPassword = ''
    },
    showPass(index) {
      this.index = index
      this.passState = true
    },
    handleDown(userId, cityCode) {
      console.log(this.list)
      for (var i; i < 1; i++) {
        // this.$router.push({ name: 'EntReportAll', query: { userId: userId, cityCode: cityCode }})
      }
      // this.list
    }
  }
}
</script>

